---
image: /generated/articles-docs-player-premounting.png
title: Premounting
slug: /player/premounting
crumb: '@remotion/player'
---

import {NoPremounting} from '../../components/Premounting/NoPremounting';
import {Premounting} from '../../components/Premounting/Premounting';

# Premounting<AvailableFrom v="4.0.140"/>

Remotion only ever renders the current frame.  
This means when a video or another asset is about to come up, it is not loaded by default.

<NoPremounting />

:::note
Even though the video is soon about to appear, it is not yet loaded
because Remotion only ever renders the current time.
:::

## What is premounting?

Premounting is the practice of mounting a component containing assets earlier to allow assets some time to load before they appear.

<Premounting />

:::note
The video is mounted earlier to give it some time to load.<br />
It carries the style <code>opacity: 0</code> to make it invisible.
It's time defined by{' '}<a href="/docs/use-current-frame"><code>useCurrentFrame()</code></a>{' '}is frozen at <code>0</code>.
:::

## Preloading a `<Sequence>`

Use premounting sparingly since having more elements mounted will slow down the page.  
Add the [`premountFor`](/docs/sequence#premountfor) prop to the [`<Sequence>`](/docs/sequence) component to enable premounting.

The number you pass is the number in frames you premount the component for.

```tsx twoslash title="Premounted.tsx"
import {Sequence, staticFile, OffthreadVideo} from 'remotion';

// ---cut---
const MyComp: React.FC = () => {
  return (
    <Sequence premountFor={100}>
      <OffthreadVideo src={staticFile('bigbuckbunny.mp4')}></OffthreadVideo>
    </Sequence>
  );
};
```

In the [Remotion Studio](/docs/studio), a premounted component is indicated with diagonal stripes:

<img src="/img/premount.png" />
<br />
<br />

A premounted [`<Sequence>`](/docs/sequence) does carry the styles `opacity: 0` and `pointer-events: none`.

It is not possible to premount a [`<Sequence>`](/docs/sequence) with `layout="none"` because such a sequence does not have a container to apply the styles to.

## With `<Series>` and `<TransitionSeries>`

`premountFor` is also available on [`<Series.Sequence>`](/docs/series) and [`<TransitionSeries.Sequence>`](/docs/transitions/transitionseries).  
It is not yet possible to premount a whole [`<Series>`](/docs/series) or [`<TransitionSeries>`](/docs/transitions/transitionseries).

## Custom premount component

Premounting can also be implemented yourself with the public Remotion APIs.  
Use the following component like you would `<Sequence>`:

```tsx twoslash title="PremountedSequence.tsx"
import React, {forwardRef, useMemo} from 'react';
import {Freeze, Sequence, SequenceProps, useCurrentFrame, useRemotionEnvironment} from 'remotion';

export type PremountedSequenceProps = SequenceProps & {
  premountFor: number;
};

const PremountedSequenceRefForwardingFunction: React.ForwardRefRenderFunction<
  HTMLDivElement,
  {
    premountFor: number;
  } & SequenceProps
> = ({premountFor, ...props}, ref) => {
  const frame = useCurrentFrame();

  if (props.layout === 'none') {
    throw new Error('`<Premount>` does not support layout="none"');
  }

  const env = useRemotionEnvironment();

  const {style: passedStyle, from = 0, ...otherProps} = props;
  const active = frame < from && frame >= from - premountFor && !env.isRendering;

  const style: React.CSSProperties = useMemo(() => {
    return {
      ...passedStyle,
      opacity: active ? 0 : 1,
      // @ts-ignore Only in the docs - it will not give a type error in a Remotion project
      pointerEvents: active ? 'none' : (passedStyle?.pointerEvents ?? 'auto'),
    };
  }, [active, passedStyle]);

  return (
    <Freeze frame={from} active={active}>
      <Sequence ref={ref} name={`<PremountedSequence premountFor={${premountFor}}>`} from={from} style={style} {...otherProps} />
    </Freeze>
  );
};

export const PremountedSequence = forwardRef(PremountedSequenceRefForwardingFunction);
```

:::note
One caveat of this custom component: In a premounted sequence, the native buffer state can still be triggered.  
It is your task to disable triggering the native buffer state (e.g set [`pauseWhenBuffering`](/docs/offthreadvideo#pausewhenbuffering) to false) when in a premounted sequence.  
You can achieve this for example by using a React context.
:::

## Usage together with the buffer state

If you also use the [buffer state](/docs/player/buffer-state), the [`<Html5Audio>`](/docs/html5-audio#pausewhenbuffering), [`<Html5Video>`](/docs/html5-video#pausewhenbuffering), [`<OffthreadVideo>`](/docs/offthreadvideo#pausewhenbuffering) and [`<Img>`](/docs/img#pausewhenloading) tags are aware of premounting and don't trigger the buffer state while in a premounted [`<Sequence>`](/docs/sequence).

Otherwise it would lead to pausing playback while a scene is not even visible yet.

## See also

- [Buffer state](/docs/player/buffer-state)
- [Preloading](/docs/player/preloading)
- [Avoiding flickering](/docs/troubleshooting/player-flicker)
